<template>
  <div ref="EcharRef" style="width: 550px; height: 350px"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
//第一步：先在官网中的指令进行安装
// npm install echarts --save
//第二步：导入echarts
import * as echarts from "echarts";
export default defineComponent({
  //第三步：创建Dom结构（并且设定div的大小）用来echars图表
  //第四步：通过ref获取到创建的Dom结构 (！！！！！Dom加载完成的生命周期！！！！！)
  mounted() {

    const main:any = this.$refs.EcharRef;
    //第五步：初始化咱们的图表内容（到这里基础的引入工作已经完成了）
    const myChars = echarts.init(main);
    //第六步：需要配置对应的option数据可以采用对象拼接的数据
    //第七步：通过setOption进行数据的设置
    myChars.setOption(this.option);
  },
  //父组件传过来的数据
  props: {
    seriesOpeion: [Array, Object],
  },
  //使用计算属性进行合并
  computed: {
    // options() {
    //   return Object.assign(this.baseOption, this.seriesOpeion);
    // },
  },
  data() {
    return {
      /* 一些配置项的设置内容 */
      option: {
        series: {
          type: 'sankey',
          layout: 'none',
          emphasis: {
            focus: 'adjacency'
          },
          data: [
            {
              name: 'a'
            },
            {
              name: 'b'
            },
            {
              name: 'a1'
            },
            {
              name: 'a2'
            },
            {
              name: 'b1'
            },
            {
              name: 'c'
            }
          ],
          links: [
            {
              source: 'a',
              target: 'a1',
              value: 5
            },
            {
              source: 'a',
              target: 'a2',
              value: 3
            },
            {
              source: 'b',
              target: 'b1',
              value: 8
            },
            {
              source: 'a',
              target: 'b1',
              value: 3
            },
            {
              source: 'b1',
              target: 'a1',
              value: 1
            },
            {
              source: 'b1',
              target: 'c',
              value: 2
            }
          ]
        }
      }
    };
  },

});
</script>
